<template>
    <div class="login-container">
        <div class="login-card">
            <h2 class="title">Apex PMS - 登录</h2>
            <form class="form" @submit.prevent="login">
                <div class="form-group">
                    <label :for="userLoginData.username">用户名</label>
                    <input type="text" id="username" v-model="userLoginData.username" placeholder="请输入用户名" required/>
                </div>
                <div class="form-group">
                    <label :for="userLoginData.password">密码</label>
                    <input type="password" id="password" v-model="userLoginData.password" placeholder="请输入密码" required/>
                </div>
                <div class="form-group">
                  <label :for="userLoginData.password">验证码</label>
                  <input style="text-align: left; display: inline-block; vertical-align: middle; width: 60%;"  type="text" v-model="inputCode" placeholder="请输入验证码" required/>
                  <!-- 验证码 -->
                  <span style="line-height:0; text-align: right; display: inline-block; vertical-align: middle; width: 40%;" @click="refreshCode()">
                    <s-identify :identifyCode="identifyCode"></s-identify>
                  </span>
                </div>
                <div>
                    <button style="text-align: center;margin-left: 5%;" type="submit" class="btn" :disabled="loginDisabled">登 录
                      <span></span>
                      <span></span>
                      <span></span>
                      <span></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import SIdentify from "@/components/SIdentify.vue";

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "login",
    components: {
      SIdentify
    },
    data() {
        return {
          loginDisabled: false,
            userLoginData: {
                username: "admin",
                password: "admin"
            },
            inputCode: "",
            identifyCode: "",
            identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ"
        };
    },
    methods: {
        refreshCode() {
          this.identifyCode = "";
          this.makeCode(this.identifyCodes, 5);
        },
        randomNum (min, max) {
          max = max + 1
          return Math.floor(Math.random() * (max - min) + min)
        },
        // 随机生成验证码字符串
        makeCode (data, len) {
          for (let i = 0; i < len; i++) {
            this.identifyCode += data[this.randomNum(0, data.length - 1)]
          }
        },
        login() {
            if (this.identifyCode.toUpperCase() !== this.inputCode.toUpperCase()) {
                this.$message.error("验证码错误！");
                this.refreshCode();
                return;
            }
            this.refreshCode();
            let url = this.host + "/user/login";
            this.$message.info("正在登录...");
            this.loginDisabled = true;
            this.axios.post(url, JSON.stringify(this.userLoginData), {
            headers: {
                "Content-Type": "application/json"
            }}).then((response) => {
                if (response.data.statusCode == 2000) {
                    let jwt = response.data.data;
                    localStorage.setItem("jwt", jwt);
                    this.$message.success("登录成功！");
                    this.$router.push("/dashboard");
                } else {
                    this.$message.error(response.data.message);
                    this.userLoginData = {};
                }
                this.loginDisabled = false;
            });
        }
    },
    mounted() {
      this.refreshCode();
    }
}
</script>

<style scoped>
.login-container {
  background: #136a8a;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #267871, #136a8a);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #267871, #136a8a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /* background-image: url("@/assets/loginBack.jpg");
  background-repeat: no-repeat;
  background-size: cover; */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-card {
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(43, 79, 177, 0.8);
  border-radius: 5px;
  padding: 20px;
  width: 400px;
}

.title {
  color: #03e9f4;
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  color: #03e9f4;
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  background-color: rgba(68, 69, 70, 0.5);
  color: #03e9f4;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out;
}

input:focus {
  outline: none;
  border-color: rgba(43, 79, 177, 0.8);
}

button {
  background: transparent;
  border: 0;
  outline: none;
}

.btn {
  padding: 10px 20px;
  margin-top: 30px;
  color: #03e9f4;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 2px;
  left: 35%;
}

.btn:hover {
  border-radius: 5px;
  color: #fff;
  background: #03e9f4;
  box-shadow: 0 0 5px 0 #03e9f4,
  0 0 25px 0 #03e9f4,
  0 0 50px 0 #03e9f4,
  0 0 100px 0 #03e9f4;
  transition: all 1s linear;
}

.btn > span {
  position: absolute;
}

.btn > span:nth-child(1) {
  width: 100%;
  height: 2px;
  background: -webkit-linear-gradient(left, transparent, #03e9f4);
  left: -100%;
  top: 0px;
  animation: line1 1s linear infinite;
}

@keyframes line1 {
  50%,
  100% {
    left: 100%;
  }
}

.btn > span:nth-child(2) {
  width: 2px;
  height: 100%;
  background: -webkit-linear-gradient(top, transparent, #03e9f4);
  right: 0px;
  top: -100%;
  animation: line2 1s 0.25s linear infinite;
}

@keyframes line2 {
  50%,
  100% {
    top: 100%;
  }
}

.btn > span:nth-child(3) {
  width: 100%;
  height: 2px;
  background: -webkit-linear-gradient(left, #03e9f4, transparent);
  left: 100%;
  bottom: 0px;
  animation: line3 1s 0.75s linear infinite;
}

@keyframes line3 {
  50%,
  100% {
    left: -100%;
  }
}

.btn>span:nth-child(4) {
  width: 2px;
  height: 100%;
  background: -webkit-linear-gradient(top, transparent, #03e9f4);
  left: 0px;
  top: 100%;
  animation: line4 1s 1s linear infinite;
}

@keyframes line4 {
  50%,
  100% {
    top: -100%;
  }
}
</style>
